{% extends 'admin/index.html' %}

{% block con-title %}
    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                <div class="page-header-heading">
                    <span class="am-icon-user page-header-heading-icon"></span>
                     用户组编辑
                   </div>
            </div>
          
        </div>
    </div>
{% endblock %}

{% block con-body %}
<div class="row-content am-cf">
    <div class="row  am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-body am-fr">

                        <form id="sb" action="{% url 'admin_authgroup_edit' ginfo.id %}" id="uploadForm" class="am-form tpl-form-line-form"  method="post" enctype='multipart/form-data'>
                            {% csrf_token %}
                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">
                                    组名
                                </label>
                                <div class="am-u-sm-9">
                                    <input name="name" value="{{ ginfo.name }}" required maxlength="32" minlength="3" type="text" class="tpl-form-input" >
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label for="user-name" class="am-u-sm-3 am-form-label">
                                    设置权限
                                </label>
                                <div class="am-u-sm-9 select">
                                   <div class="am-u-sm-5 ">
                                        <center><p>可选的权限</p></center>
                                        <select class="one"  multiple="multiple">
                                         {% for v in plist %}
                                            <option value="{{ v.id }}">{{ v }}</option>
                                         {% endfor %}
                                         
                                        </select>
                                        <center>
                                            <br>
                                            <button type="button" class="btn-all am-btn am-btn-primary am-btn-xs">选择全部-> </button>
                                        </center>
                                   </div>
                                   <div class="am-u-sm-5">
                                        <center><p>已选择权限</p></center>

                                        <select name="prms" class="two"  multiple="multiple">
                                           {% for v in ginfo.permissions.all %}
                                              <option value="{{ v.id }}">{{ v }}</option>
                                           {% endfor %}
                                        </select>

                                        <center>
                                            <br>
                                            <button type="button" class="btn-remove am-btn am-btn-danger am-btn-xs"> <- 移除权限 </button>
                                        </center>
                                   </div>
                                  
                                </div>
                            </div>

                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3">
                                    <button id="sub" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
   $('.one option').dblclick(function(){
        $('.two').append($(this))
        $(this).attr('selected',false)
   })
   $('.two').on('dblclick','option',function(){
        $('.one').append($(this))
        $(this).attr('selected',false)
   })
   $('.select .btn-all').click(function(){
        var s = $(this).parents('div').find('option')
        $('.two').append(s)
   })
   $('.select .btn-remove').click(function(){
        var s = $(this).parents('div').find('option')
        $('.one').append(s)
   })

   $('#sub').click(function(){
        // $('#select2 option').attr('selected',true) //X
        $('.select .two option').prop('selected',true) 
   })
</script>
{% endblock %}